<template>
  <div>
    <div style="position: fixed;top: 0;left: 0;width: 100%;height:100%;background-color:#898e9b"></div>
    <div style="position: absolute;top: 0;left: 0;width: 100%;height:120px;background-color:#647aad">
      <p style="font-size: 100px;font-weight:800;color:#4dbdff;text-align: center;font-style: italic;font-family:楷体">简历box</p>
      <el-button type="info" plain round style="position: fixed;top: 80px;left: 61%" @click="$router.push('/home-page')">返回主页</el-button>
    </div>
    <div style="position: absolute;top: 120px;left:0;">
      <el-table :data="userresumetable" style="width: 1705px">
        <!--      filterTableData这个表中其实已经包含了id,只是没有将它显示在前端页面上-->
        <el-table-column label="公司名称" prop="firmname"/>
        <el-table-column label="意向岗位" prop="position"/>
        <el-table-column label="工资" prop="wage"/>
        <el-table-column label="投递人姓名" prop="applicant" />
        <el-table-column label="学历" prop="educational" />
        <el-table-column label="offer预览" prop="offer" >
          <template v-slot="scope">
            <el-image
                style="width: 100px;height: 100px"
                :src="scope.row.offer || 'https://tse2-mm.cn.bing.net/th/id/OIP-C.gWM_1gkC-L6GaHZ7yFA3qAAAAA?w=231&h=180&c=7&r=0&o=5&dpr=1.5&pid=1.7' ||defaultImage"
                :fit="'contain'"
                @error="handleImageError(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="left" width="400px">
          <template #default="scope">
            <el-button plain @click="lookresume(scope.row.applicantaccount)"  type="primary" size="default">
              查看简历
            </el-button>
            <el-button plain @click="offerdialogs(scope.row.id)" type="success" size="default">
              发送offer
            </el-button>
            <el-button plain @click="ignore(scope.row.id)" type="danger" size="default">
             忽略
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
<!--    HR点击查看简历弹出用户的简历信息-->
      <el-dialog v-model="resumedialog" title="简历信息"  width="1000" style="position: fixed;z-index: 100;left: 340px">
        <div style="position:relative; margin: 20px;float: left">
          <el-image  style="width: 200px; height: 200px;" :src="this.userimage" fit="fill" />
        </div>
        <div style="margin-left: 50px;margin-top: 60px;position: relative;display: inline-block">
          <h1 style="font-size: 40px">{{this.name}}</h1>
          <div style="line-height: 70px;font-size: 20px">
            <span>{{ this.sex }}</span>&emsp;&Iota;&emsp;<span>{{ this.age }}</span>&emsp;&Iota;&emsp;<span>{{this.position}}</span>&emsp;&Iota;&emsp;<span>{{this.address}}</span>
          </div>
        </div>
        <div style="margin-left: 20px">
          <h1 style="font-size: 40px;margin-top: 100px">求职意向</h1>
          <p style="line-height: 80px;font-size: 25px">{{this.intendjob}}</p>
          <h1 style="font-size: 38px;margin-top: 10px">工作/实习经历</h1>
          <h1 style="font-size: 25px;line-height: 60px;color: #1d90ca;display: inline-block">项目名称:</h1>
          <p style="display: inline-block;font-size: 20px">{{ this.experiencename }}</p>
          <h1 style="font-size: 25px;line-height: 30px;color: #1d90ca">项目描述:</h1>
          <p style="border-style:solid;height: 240px;width: 800px;font-size: 16px">{{this.experience}}</p>
          <h1 style="font-size: 38px;margin-top: 10px;line-height: 100px">赛事获奖信息</h1>
          <h1 style="font-size: 25px;line-height: 60px;color: #1d90ca;display: inline-block">比赛名称:</h1>
          <p style="display: inline-block;font-size: 20px">{{this.matchname}}</p>
          <h1 style="font-size: 25px;line-height: 30px;color: #1d90ca">比赛经历介绍:</h1>
          <p style="border-style:solid;height: 240px;width: 800px;font-size: 16px">{{this.matchintroduction}}</p>
          <h1 style="font-size: 38px;margin-top: 10px;line-height: 100px">获奖证书或者考级证书:</h1>
          <p style="border-style:solid;height: 355px;width: 555px;">
            <el-image style="width: 550px;height: 350px"  :src="this.image" ></el-image>
          </p>
          <h1 style="font-size: 38px;margin-top: 10px;line-height: 100px">个人优势:</h1>
          <p style="border-style:solid;height: 240px;width: 800px;font-size: 16px">{{this.advantage}}</p>
        </div>
      </el-dialog>
<!--HR点击发送offer弹出对话框-->
    <el-dialog
        v-model="offerdialog"
        title="发送offer"
        width="500"
        align-center
    >
      <div style="margin: 50px 20px">
        <el-upload
            drag
            action="http://localhost:9090/file/upload"
            :on-success="(row,res,file) =>handleFileUpload(this.id,res,file)"
            :file-list="filelist"
            limit="1"
            list-type="picture"
            multiple
        >
          <el-icon class="el-icon--upload"><upload-filled /></el-icon>
          <div class="el-upload__text">
            Drop file here or <em>click to upload</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              jpg/png files with a size less than 500kb
            </div>
          </template>
        </el-upload>
      </div>
    </el-dialog>
  </div>
</template>

<style>
.el-dialog {
  margin: 0 auto !important;
  height: 90%;
  overflow: hidden;
  .el-dialog__body {
    position: absolute;
    left: 0;
    top: 54px;
    bottom: 0;
    right: 0;
    padding: 0;
    z-index: 1;
    overflow: hidden;
    overflow-y: auto;
  }
}

</style>
<script>
import axios from "axios";
import {UploadFilled} from "@element-plus/icons-vue";
import request from "@/Utils/request.js";
export default {
  components: {UploadFilled},
  data(){
    return{
      defaultImage:'https://gd-hbimg.huaban.com/8a599a1eef41dcdbfdfa9194596e8220fa9569d227b89-L623jo_fw658',
      userimage:'',
      filelist:[],
      name:'',
      sex:'',
      age:'',
      position:'',//学历
      intendjob:'',//求职意向
      address:'',
      experiencename:'',
      experience:'',
      matchname:'',
      offer:'',
      matchintroduction:'',
      advantage:'',
      image:'',
      resumedialog:false,
      offerdialog:false,
      userresumetable:[],
      user:localStorage.getItem("user")?JSON.parse(localStorage.getItem("user")):{},
      usermsg:localStorage.getItem("usermsg")?JSON.parse(localStorage.getItem("usermsg")):{},
      // employeemsg:localStorage.getItem("employeemsg")?JSON.parse(localStorage.getItem("employeemsg")):{},
      id:''
    }
  }
  ,
  methods:{
    handleImageError(row) {
      row.offer = this.defaultImage;
    },
    ignore(id){
      request.put("userresume/updateByempid",{
        id:id
      }).then(res=>{
        this.$message.success("操作成功！")
      })
    },
    offerdialogs(id){
      this.offerdialog =true;
      this.id=id;
    },
    handleFileUpload(id,res,file){
      request.put("/userresume/updateoffer",{
        offer:file[0]['response'],
        id:id,
      }).then(res=>{
        if(res === 1){
          this.$message.success("上传成功!")
        }else {
          this.$message.error("上传失败!")
        }
      })
    setTimeout(()=>{
      location.reload()
    },1000)
    },
    getBase64(file) {
      return new Promise(function (resolve, reject) {
        const reader = new FileReader()
        var imgResult=''
        reader.readAsDataURL(file)
        reader.onload = function () {
          imgResult = reader.result
        }
        reader.onerror = function (error) {
          reject(error)
        }
        reader.onloadend = function () {
          resolve(imgResult)
        }
      })
    },
    getFile(file, fileList) {
      this.getBase64(file.raw).then(res => {
        const params = res.split(',')
        console.log(params, 'params')
        if (params.length > 0) {
          this.proofImage = params[1]
        }
        this.imgResult1=params[0]+','+params[1]
      })
    },
    lookresume(applicantaccount){
      request.get(`/user/selectByaccount/${applicantaccount}`,).then(res=>{
        this.userimage=res.image
      })
      request.get(`userresume/selectbyaccount/${applicantaccount}`,).then(res=>{
        this.name=res['name']
        this.sex=res['sex']
        this.age=res['age']
        this.position=res['position']
        this.intendjob=res['intendjob']
        this.address=res['address']
        this.experiencename=res['experiencename']
        this.experience=res['experience']
        this.matchintroduction=res['matchintroduction']
        this.matchname=res['matchname']
        this.advantage=res['advantage']
        this.image=res['image']
      }).catch(error=>{
        console.error("请求错误",error)
      })
      this.resumedialog=true;
    }
  },
  mounted() {
    request.get('/userresume/selectemployeemessage',{
      params:{
        account:this.user.account
      }
    }).then(res=>{
       this.userresumetable=res
    })
  }
}
</script>